<template>
  <div
      ref="chartRef"
      style="width: 100%;height: 100%"
  />
</template>

<script lang="ts" setup>
import echarts from './echarts'
import { nextTick, ref, watch } from 'vue'
import { ECharts } from 'echarts/core'

const props = defineProps({
  options: {
    type: Object,
    default () {
      return {}
    }
  }
})

const chartRef = ref()

const chart = ref<ECharts>()

nextTick(() => {
  chart.value = echarts.init(chartRef.value)
  chart.value.setOption(props.options)
  window.addEventListener('resize', () => {
    chart.value?.resize()
  })
})

watch(() => props.options, () => chart.value?.setOption(props.options), { deep: true })
</script>
